<template>
  <ul class="musiclist" ref="musiclist">
    <!-- 通过自定义事件反向传值个父组件 -->
    <li v-for="(music, i) in musiclist" :key="music.id + music.name + i">
      <div
        :class="['sub', { red: i + 1 < 4 }]"
        v-if="shownum"
        :style="[
          { paddingLeft: i + 1 >= 100 ? '-5px' : '0' },
          { paddingRight: i + 1 >= 100 ? '5px' : '10px' },
        ]"
      >
        {{ i >= 9 ? i + 1 : "0" + (i + 1) }}
      </div>
      <div class="left">
        <div class="name">
          <b v-html="$options.filters.highlight(music.name, keyword)"></b>
          <span v-if="music.song.alias.length > 0">
            (<b v-for="(alias, i) in music.song.alias" :key="i + alias">
              <b v-html="$options.filters.highlight(alias, keyword)"></b></b
            >)
          </span>
        </div>
        <div class="artist">
          <span
            v-if="music.song.privilege"
            :class="{ sq: music.song.privilege.maxbr > 320000 }"
          ></span>
          <span
            v-for="artist in music.song.artists"
            :key="artist.id + artist.name"
          >
            <b v-html="$options.filters.highlight(artist.name, keyword)"></b>
          </span>
          -
          <b
            v-html="$options.filters.highlight(music.song.album.name, keyword)"
          >
          </b>
        </div>
      </div>
      <!-- 通过自定义事件反向传值个父组件 -->
      <div class="right" @click.stop="$emit('play', music)"></div>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    musiclist: {
      type: Array,
      define: () => {
        return [];
      },
    },
    shownum: {
      type: Boolean,
      define: false,
    },
    keyword: {
      type: String,
      define: "",
    },
  },

  filters: {
    highlight(value, keyword) {
      return value.replace(keyword, `<i style="color:#507daf">${keyword}</i>`);
    },
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.musiclist {
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 10px;
    .sub {
      font-size: 17px;
      color: #999;
      text-align: center;
      &.red {
        color: #df3436;
      }
    }
    .left {
      flex: 1;
      overflow: hidden;
      white-space: nowrap;
      font-size: 17px;
      color: #333;
      padding: 6px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      .name {
        width: 95%;
        overflow: hidden;
        text-overflow: ellipsis;
        span {
          color: #888;
        }
      }
      .artist {
        width: 95%;
        font-size: 12px;
        color: #888;
        overflow: hidden;
        text-overflow: ellipsis;
        .sq {
          &::before {
            content: "";
            display: inline-block;
            width: 12px;
            height: 8px;
            background: url(../assets/images/icon.png) no-repeat;
            background-size: 166px 97px;
          }
        }
      }
    }
    .right {
      padding-right: 10px;
      display: inline-block;
      width: 22px;
      height: 22px;
      background: url(../assets/images/icon.png) no-repeat;
      background-size: 166px 97px;
      background-position: -24px 0;
      margin-top: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
